<template>
  <div class="page-container">
    <div>
      <ex_header_spiler title="ex_super_form演示页面" />
      <h3 class="bold">介绍</h3>
      高阶表单,用于快速生成表单
      可应用所有el-form组件属性，不适用插槽
      <div class="flex_row_center">
        继承el-form所有事件与属性
        <el-link class="mg_l2" href="https://element.eleme.cn/#/zh-CN/component/form" type="primary"
          target="_blank">相关链接</el-link>
      </div>
      <h3 class="bold">使用示例</h3>
      <div>
        <div>最简用法,普通输入框</div>
        <ex_super_input v-model="form.a" type="input" />
      </div>
      <div>
        <div>自动化选择组件，</div>
        <ex_super_input v-model="form.b" type="select" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>单选组，</div>
        <ex_super_input v-model="form.b" type="radio-group" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>多选组，</div>
        <ex_super_input v-model="form.c" type="checkbox-group" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>时间选择</div>
        <ex_super_input v-model="form.d" type="date-picker"  />
      </div>
      <div>
        <div>数字选择</div>
        <ex_super_input v-model="form.e" type="input-number"  />
      </div>
      <h3 class="bold">新增属性</h3>

      <el-table :data="com_attrs" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
      <h3 class="bold">model配置属性</h3>
      <el-table :data="com_model" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>



export default {
  title: "ex_super_form组件",
  data() {
    return {
      form: {},
      com_attrs: [
        { name: "model", remark: "用于快速生成表单的配置属性", type: "Array", },
        { name: "isSupportFold", remark: "是否支持隐藏fold", type: "Boolean",default:"true" },
        { name: "formDataPick", remark: "getFormData获取表单数据对表单数据过滤的方法", type: "Function", },
        { name: "formDataHandle", remark: "getFormData获取表单数据对表单数据处理的方法", type: "Function", },
        { name: "default", remark: "默认值", type: "Object", },
        { name: "resetFieldFun", remark: "当调用resetFields时，处理重置，", type: "Function(new,old)", },
        { name: "data", remark: "插入表单数据", type: "Object", },
        { name: "loading", remark: "加载中", type: "Boolean", },
       
        { name: "itemStyle", remark: "生成的form-item的style", type: "Object", },
        { name: "itemAttrs", remark: "生成的form-item的attrs", type: "Object", },
        { name: "itemClass", remark: "生成的form-item的class", type: "Object, String", },
        { name: "inputStyle", remark: "生成的form-input的style", type: "Object", },
        { name: "inputAttrs", remark: "生成的form-input的attrs", type: "Object", },
        { name: "inputClass", remark: "生成的form-input的class", type: "Object, String", },
        { name: "formClass", remark: "生成的form的class", type: "Object, String", },
       

      ],
      com_model: [
        { name: "key", remark: "对应绑定属性名", type: "string" },
        { name: "header", remark: "展示分类标题栏", type: "string" },
        { name: "divider", remark: "展示分割线", type: "string" },
        { name: "grid", remark: "布局嵌套，二维数组，用于布局，{col:item,span:1}", type: "array" },
        { name: "slot", remark: "插槽名称，定义后可嵌入对应名称插槽", type: "string" },
        { name: "renderItem", remark: "渲染函数内容，渲染item", type: "function(h,{data,item,index})" },

        { name: "formType", remark: "如果为text，将显示纯文字", type: "string" },
        { name: "render", remark: "渲染函数内容，渲染input", type: "function(h,{data,item,index})" },


        { name: "type", remark: "对应输入框类型，对应ex_super_input的类型", type: "string",enum:"text,input,select,radio-group,checkbox-group,time-select,time-picker,date-picker,input-number," },

        { name: "label", remark: "对应标签", type: "string,function" },
        { name: "keyExtra", remark: "当输入选择改变触发事件时，额外绑定值变化。默认绑定触发事件changeItem", type: "object" },
        { name: "disabled", remark: "是否禁用", type: "boolean,function(data)" },
        { name: "if", remark: "是否出现", type: "boolean,function(data,item,value)" },
        { name: "rules", remark: "校验规则", type: "object,function(data,item,value)" },
        { name: "itemStyle", remark: "生成的form-item的style", type: "Object", },
        { name: "itemAttrs", remark: "生成的form-item的attrs", type: "Object", },
        { name: "itemClass", remark: "生成的form-item的class", type: "Object, String", },
        { name: "inputStyle", remark: "生成的form-input的style", type: "Object", },
        { name: "inputAttrs", remark: "生成的form-input的attrs", type: "Object", },
        { name: "inputClass", remark: "生成的form-input的class", type: "Object, String", },

      ],
    };
  },

};
</script>
<style  scoped></style>
